<template>
  <div class="countdowmn_wrap">
    <div class="countdown flex_center_between" :class="className">
      <span class="number">{{dayData.day || '--'}}</span>天
      <span class="number">{{dayData.hour || '--'}}</span>:
      <span class="number">{{dayData.minute || '--'}}</span>
      <span v-if="options.secondVisibe">:</span>
      <span v-if="options.secondVisibe" class="number">{{dayData.second || '--'}}</span>
    </div>
  </div>
</template>

<script>
import { countdown } from '@/utils/common';

export default {
  props: {
    options: {
      type: Object
    },
    className: {
      type: String
    }
  },
  data() {
    return {
      dayData: {},
      timer: null
    };
  },
  mounted() {
    this.getCountdown();
  },
  beforeDestroyed() {
    clearTimeout(this.timer);
  },
  methods: {
    getCountdown() {
      const {
        startDate, endDate, auto = false, secondVisible = false
      } = this.options;
      const { status, diffData } = countdown({
        startDate,
        endDate,
      });
      if (status === 2) {
        this.dayData = diffData;
      }
      // 正在进行中，自动倒计时
      if (status === 2 && auto) {
        this.timer = setTimeout(this.getCountdown, 1000);
      }
    },
  }
};
</script>

<style lang="less" scoped>
.countdown {
  .number {
    margin: 0 2px;
    padding: 1px 2px;
    font-size: 14px;
    color: @-color-red;
    background: #fff;
    // .rem1px(#d3e2ff, 1px, 1px);
    border: 1px solid #ffe7d5;
    border-radius: 2px;
    &:first-child {
      margin-left: 0;
    }
    &:last-child {
      margin-right: 0;
    }
  }
  &.ipo_fund_detail {
    .number {
      margin: 0 8px;
      padding: 1px 3px;
      font-size: 24px;
      color: #1f6aff;
      background: #f1f6ff;
      // .rem1px(#d3e2ff, 1px, 1px);
      border: 1px solid #d3e2ff;
      border-radius: 2px;
      &:first-child {
        margin-left: 0;
      }
    }

  }
  &.ipo_fund_list{

    font-size: 12px;
    .number {
      margin: 0 3px;
      font-size: 13px;
      color: #1f6aff;
      background: #f1f6ff;
      border: 1px solid #d3e2ff;
      border-radius: 1px;
      &:first-child {
        margin-left: 0;
      }
      &:last-child {
        margin-right: 7px;
      }
    }
  }
}
</style>